<!--
 * @Author: your name
 * @Date: 2021-12-16 10:09:42
 * @LastEditTime: 2021-12-16 10:36:50
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day8vue3\my-app\src\components\Reactive.vue
-->
/<template>
  <div>
      <p>{{info.name}}</p>
      <p>{{info.age}}</p>
      <p>{{age}}</p>
      <button @click="changeAge">年龄</button>
  </div>
</template>

<script>
// 引入reactive 引入toRefs机构多个值
// import { reactive,toRefs} from 'vue'
import { reactive,toRef,isRef} from 'vue'
export default {
    setup(){
        // 通过reactive 响应式
        let info=reactive({
            name:"小花",
            age:18
        })
        // toRefs 将响应式对象转换为普通对象  需要return回去
        // let {name,age}=toRefs(info)
        // console.log(name,age);

        // toRef 解构单个值 两个参数
        let age=toRef(info,"age")
        console.log(age);

        // 检查值是否为一个 ref 对象
        console.log(isRef(age));

        const changeAge=()=>{
            info.age++
            // 用ref 需要通过value取值
            age.value++
        }
        // 所有的参数和函数都需要return
        return {
            info,
            changeAge,
            // name,
            age
        }
    }
}
</script>

<style>

</style>